<template>
  <div class="tasks cont-main wh100">
    <LoadingBox :loading="loading">
      <div class="menu-body common-content wh100 p15">
        <div class="top-search-bar">
          <el-form size="small" ref="queryForm" inline>
            <el-form-item label="">
              <el-select
                  style="width: 190px"
                  v-model="searchData.taskState"
                  placeholder="任务状态"
                  @change="search"
                  clearable>
                <el-option label="运行中" value="0"></el-option>
                <el-option label="挂起" value="1"></el-option>
                <el-option label="结束" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select
                  style="width: 190px"
                  v-model="searchData.taskType"
                  placeholder="任务状态类型"
                  @change="search"
                  clearable>
                <el-option label="执行完成" value="0"></el-option>
                <el-option label="介入停止" value="1"></el-option>
                <el-option label="异常结束" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-input
                  style="width: 190px"
                  v-model="searchData.taskName"
                  placeholder="按任务名称"
                  @input="search"
                  clearable></el-input>
            </el-form-item>
            <el-form-item label="">
              <el-input
                  style="width: 190px"
                  v-model="searchData.taskProcessId"
                  placeholder="按任务进程号"
                  @input="search"
                  clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="search()">搜索
              </el-button>
              <el-button
                  type="primary"
                  icon="el-icon-refresh-right"
                  @click="refresh()">刷新
              </el-button>
            </el-form-item>
          </el-form>
        </div>

        <Table
            ref="table"
            :table-header="tableHeader"
            :tableData="tableData"
            :max-height="tableMaxHeight"
            :pg-total-num="total"
            :page.sync="page"
            :limit.sync="limit"
            @pagination="pagination">
          <div slot="operation" slot-scope="row">
            <i class="el-icon-edit table-btn" @click="ediUserInfo(row)" title="修改用户信息" v-if="auth&&auth.edit"></i>
            <i class="el-icon-refresh-left table-btn" @click="resetPassword(row)" title="重置密码"></i>
            <i class="el-icon-user table-btn" @click="quitUser(row)" title="剔除用户下线"></i>
            <i class="el-icon-delete table-btn del" @click="del(row)" title="删除" v-if="auth&&auth.del"></i>
          </div>

          <div slot="taskState" slot-scope="row" style="line-height: 1;">
            <el-tag v-if="parseInt(row.data.taskState)===0" type="success" size="mini" effect="dark">运行中</el-tag>
            <el-tag v-else-if="parseInt(row.data.taskState)===1" type="warning" size="mini" effect="dark">挂起</el-tag>
            <el-tag v-else-if="parseInt(row.data.taskState)===2" type="warning" size="mini" effect="dark">结束</el-tag>
            <el-tag v-else type="danger" size="mini" effect="dark">未运行</el-tag>
          </div>

          <div slot="taskStateType" slot-scope="row" style="line-height: 1;">
            <el-tag v-if="parseInt(row.data.taskStateType)===0" type="success" size="mini" effect="dark">执行完成</el-tag>
            <el-tag v-else-if="parseInt(row.data.taskStateType)===1" type="warning" size="mini" effect="dark">介入停止
            </el-tag>
            <el-tag v-else-if="parseInt(row.data.taskStateType)===2" type="danger" size="mini" effect="dark">异常结束
            </el-tag>
            <el-tag v-else type="success" size="mini" effect="dark">正常</el-tag>
          </div>
        </Table>
      </div>
    </LoadingBox>
  </div>
</template>

<script>
import Table from "@/components/Table";
import {debounce} from '@/utils'

export default {
  name: "Tasks",
  components: {Table},
  data () {
    return {
      auth: null,
      loading: false,
      tableMaxHeight: '50px',
      tableHeader: [
        {prop: "taskName", name: "任务名称", minWidth: 150},
        {prop: "taskProcessId", name: "任务进程号", minWidth: 150},
        {prop: "taskOpenUser", name: "任务开启人", minWidth: 120},
        {prop: "taskStopUser", name: "任务结束人", minWidth: 100},
        {prop: "taskState", name: "状态", minWidth: 100, tag: true},
        {prop: "taskStateType", name: "状态类型", minWidth: 100, tag: true},
        {prop: "taskStartTime", name: "开始时间", minWidth: 140},
        {prop: "taskEndTime", name: "结束时间", minWidth: 140}
      ],
      searchData: {
        taskState: "",
        taskType: "",
        taskName: "",
        taskProcessId: ""
      },
      total: 0,
      page: 1,
      limit: 10,
      tableData: [],
      role: [] // 角色下拉列表
    };
  },
  created () {
    this.getList();
  },
  mounted () {
    this.$nextTick(() => {
      this.tableMaxHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 50 - 30 - 48 + 'px'
    })
  },
  methods: {
    // 列表
    getList () {
      this.loading = true
      this.$api.getRuningTasks({
        pageSize: this.limit,
        pageNum: this.page,
        taskState: this.searchData.taskState,
        taskStateType: this.searchData.taskType,
        taskName: this.searchData.taskName,
        taskProcessId: this.searchData.taskProcessId,
      }).then((res) => {
        this.tableData = res.data.data.records.map(item => {
          item.taskStartTime = item.taskStartTime ? this.$moment(Number(item.taskStartTime)).format("YYYY-MM-DD HH:mm:ss") : '';
          item.taskEndTime = item.taskEndTime ? this.$moment(Number(item.taskEndTime)).format("YYYY-MM-DD HH:mm:ss") : '';
          return item
        })
        this.total = res.data.data.total
      }).finally(() => {
        this.loading = false
      });
    },
    // 搜索
    search: debounce(function () {
      this.getList();
    }, 100),
    // 刷新
    refresh () {
      this.getList();
    },
    pagination () {
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
  .tasks {

  }
</style>